<template>
  <div style="width:100%; height:90.5vh; background-color:#F2F2F2;">
    <div class="root" style="width: 80%; margin:auto; background-color:#FFFFFF;">
      <!-- 患者卡片列表，使用 flex 布局来显示三列 -->
      <div class="patient-cards">
        <div v-for="(patient, index) in pagedPatients" :key="patient.id" class="info" style="background-color: #FFFFFF; width: 30%; margin: 10px; display: flex; flex-direction: column; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
          <div style="padding: 20px;">
            <!-- 第一部分，患者信息 -->
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <img :src="patient.imgUrl" alt="" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 10px; border: 2px solid #fff;">
              <div :style="getStatusStyle(patient.patient.receptionStatus)" class="type">
                {{ getStatusText(patient.patient.receptionStatus) }}
              </div>

            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; color: white;">
              <p style="margin: 0; font-size: 18px; font-weight: bold; color: black;">{{ patient.patient.realName }}</p>
              <p style="margin: 5px 0; font-size: 16px; color: #FFC71C;">{{ patient.snVIP.membershipType }}</p>
              <p style="margin: 5px 0; font-size: 16px; color: #99A699;">{{ patient.patient.gender }}</p>
              <p style="margin: 5px 0; font-size: 16px; color: #99A699;">{{ patient.patient.age }}岁</p>
            </div>
            <!-- 第二部分，创建时间 -->
            <div style="display: flex; justify-content: space-between; align-items: center; color: #99A699;">
              <p style="font-size: 16px; margin: 0;">创建时间: {{ patient.registrationManagement.registrationTime }}</p>
            </div>

            <!-- 第三部分，科室和医生 -->
            <div style="display: flex; justify-content: space-between; color: #99A699;">
              <p style="font-size: 16px; margin: 0;">科室: {{ patient.employee.name }}</p>
              <div style="display: flex; justify-content: center; flex-grow: 1;">
                <p style="font-size: 16px; margin: 0;">医生: {{ patient.employee.name }}</p>
              </div>
            </div>
            <!-- 第四部分，手机号 -->
            <div style="display: flex; justify-content: space-between; color: #99A699;">
              <p style="font-size: 16px; margin: 0;">手机号: {{ patient.patient.phoneNumber }}</p>
            </div>
          </div>

          <!-- 按钮部分 -->
          <div style="display: flex; margin-top: auto; border-top: 2px solid #ddd;">
            <div style="flex: 1; background-color: #FFFFFF; color: #666EE8; padding: 10px; border-radius: 0 0 0 5px; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; border-right: 2px solid #ddd;"
                 @click="handleReception(patient.patient.patientId)">
              接诊
            </div>
            <div style="flex: 1; background-color: #FFFFFF; color: #99A699; padding: 10px; border-radius: 0 0 5px 0; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer;"
                 @click="handleHistory(patient.patient.patientId)">
              查看患者信息
            </div>
          </div>



        </div>
      </div>


      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="patients.length"
          @current-change="handlePageChange"
          layout="prev, pager, next, jumper"
          background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import axios from 'axios';
import { ElPagination } from 'element-plus';

const TokenKey = 'Admin-Token';
const token = Cookies.get(TokenKey);

export default {
  components: {
    ElPagination,
  },
  data() {
    return {
      patients: [], // 存储所有患者信息
      currentPage: 1, // 当前页码
      pageSize: 9, // 每页显示 9 个患者卡片
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.patients.length / this.pageSize); // 计算总页数
    },
    pagedPatients() {
      // 计算当前页要显示的患者数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.patients.slice(start, end);
    },
  },
  mounted() {
    axios.get('http://localhost:8888/sn/doctor/userid', {
      headers: {
        Authorization: token
      }
    }).then(response => {
          const doctorId = response.data;
          console.log('返回的用户ID:', doctorId);
          return axios.get(`http://localhost:8888/sn/doctor/patients/${doctorId}`, {
            headers: {
              Authorization: token
            }
          });
        })
        .then(response => {
          this.patients = response.data;  // 将返回的患者列表赋值给 patients
          console.log('挂号的患者列表:', this.patients);
        })
        .catch(error => {
          console.error('请求失败:', error);
        });


  },
  methods: {
    // 处理接诊按钮点击事件，跳转到 /snrecord 页面并携带患者 ID
    handleReception(patientId) {
      this.$router.push({ path: '/snrecord', query: { patientId } });
    },
    handleHistory(patientId) {
      this.$router.push({ path: '/member', query: { patientId } });
    },
    // 获取接诊状态文本
    getStatusText(status) {
      if (status === 0) {
        return '待接诊';
      } else if (status === 1) {
        return '接诊中';
      } else if (status === 2) {
        return '已接诊';
      }
      return '';
    },

    // 获取接诊状态背景颜色
    getStatusStyle(status) {
      if (status === 0) {
        return { backgroundColor: 'red' }; // 待接诊：红色
      } else if (status === 1) {
        return { backgroundColor: 'green' }; // 接诊中：绿色
      } else if (status === 2) {
        return { backgroundColor: 'gray' }; // 已接诊：灰色
      }
      return {};
    },

    handlePageChange(page) {
      this.currentPage = page;
    },
  },


};


</script>
<style scoped>
.patient-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.type{
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
</style>
